﻿@using BBICMS.Infrastructure
@model BBICMS.Model.View.AdListVM
@{
    ViewBag.Title = "广告列表";
    ViewBag.PageTitle = ViewBag.Title + "_广告管理";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@section footer{
<script src="@Url.Content("~/Content/Admin/js/moment.min.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Admin/js/ace/adsDataService.js")"></script>

   <script>
        $(function(){
            var ViewModel = function () {
                this.ads = ko.observableArray(@Html.Raw(Model.AdsJSON));

                this.currentPost = {};

                this.errorMessage = ko.observable();

                this.showError = function (error) {
                    $('#error-container').fadeIn();
                };

                this.requestDelConfirm = function (vPost) {
                    vm.currentPost = vPost;
                    $('#del-confirm').modal();
                };

                this.del = function () {
                    var vPost = ko.toJS(vm.currentPost);

                    adsDataService.del(vPost).done(function (response) {
                        vm.ads.remove(function (item) {
                            return item.postId === vPost.postId;
                        });
                    }).fail(function (error) {
                        vm.showError(error);
                    }).always(function () {
                        $('#del-confirm').modal('hide');
                    });
                };


            };
            var vm = new ViewModel();


            ko.applyBindings(vm);

            //当前菜单          
            $('.mainmenu>li').eq(3).addClass('nav-open').find('.submenu li').eq(0).children('a').addClass('active');
          
        })
</script>

}


<div class="toolbar">
    <a href="#" class="showmenu"><i class="fa fa-bars"></i></a>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index","Home")"><i class="glyphicon glyphicon-home"></i> 控制面板</a></li>
        <li><a href="#">广告管理</a></li>
        <li class="active">@ViewBag.Title</li>
    </ol>
</div>
<div class="main-content">


    <div class="box">
        <header class="box-header">
            <h3><i class="glyphicon glyphicon-picture"></i> @ViewBag.Title</h3>
            <div class="control">
                <a href="#" class="expand"><i class="fa fa-expand"></i></a>
                <a href="#" class="compress"><i class="fa fa-compress"></i></a>
            </div>
        </header>

        

        <section class="box-body">

            <div id="error-container" class="hide">
                <div class="alert alert-error">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <h4>Oops..</h4>
                    <p>Something went wrong. Here's the error message:</p>
                    <p data-bind="text: errorMessage"></p>
                </div>
            </div>



            <div class="box-toolbar text-right">
                <a class="btn btn-primary" href="@Url.Action("CreateAd")"><i class="glyphicon glyphicon-plus"></i> 添加广告</a>
            </div>


            <div class="table-responsive">
                <table class="table table-hover box-table">
                    <thead>
                        <tr>
                            <th class="col-md-1">
                                <input type="checkbox">
                            </th>
                            <th class="col-md-3">
                                广告主题
                            </th>
                            <th class="col-md-3">
                                <span class="line"></span>创建日期
                            </th>
                            <th class="col-md-3">
                                <span class="line"></span>创建人
                            </th>
                            <th class="col-md-2">
                                <span class="line"></span>操作
                            </th>
                        </tr>
                    </thead>
                    <tbody data-bind="template: { name: 'list-template', foreach: ads }"></tbody>

                </table>
                <script type="text/html" id="list-template">
                    <tr class="first">
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>
                            <img data-bind="attr: {src: smallImgUrl}" class="img-circle pull-left" style="width:50px;height:50px; margin-right:10px;" />
                            <h4 data-bind="text: title"></h4>

                        </td>
                        <td data-bind="text:  moment(addedDate).format('YYYY-MM-DD')"></td>
                        <td data-bind="text: addedBy"></td>
                        <td>
                           
                               <a data-bind="attr: {href: '/bbi-admin/ad/editad/' + adId}" class="btn btn-xs btn-primary"> <i class="glyphicon glyphicon-edit"></i></a>
                               <a href="#" data-bind="click: $parent.requestDelConfirm" class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-trash"></i> </a>

                           
                        </td>
                    </tr>
                </script>
                
            </div>
        </section>
        <footer class="box-footer">
            <ul class="pagination">
                @Html.PageLinks(Model.PagingInfo, x => Url.Action("AdList", new { Page = x }))
            </ul>
        </footer>

     

    </div>
</div>
<!-- end main container -->


<div id="del-confirm" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="del-confirm-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="del-confirm-label" class="modal-title">确认删除</h4>
            </div>
            <div class="modal-body">
                <p>你确定要删除此产品吗？</p>
                <p class="alert alert-danger">
                    <strong>注意:</strong>
                    此操作不能撤消。
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button class="btn btn-primary" data-bind="click: del">删除广告</button>
            </div>
        </div>
    </div>
</div>  